<template>
  <div class="footer-page">
    <el-form
      :model="articleForm"
      :rules="rules"
      ref="articleForm"
      label-width="130px"
      class="demo-articleForm"
    >
      <el-form-item
        label="文章标题："
        prop="article_title"
      >
        <el-input
          style="width:600px"
          v-model="articleForm.article_title"
          maxlength="50"
          show-word-limit
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        label="文章关键字："
        prop="keword"
      >
        <el-input
          style="width:600px"
          v-model="articleForm.keword"
          maxlength="20"
          show-word-limit
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        label="文章栏目"
        required
      >
        <el-form-item
          prop="parentid"
          style="float: left; margin-right: 10px"
        >
          <el-select
            v-model="articleForm.parentid"
            placeholder="一级分类"
            @change="changeLevel1"
          >
            <el-option
              v-for="item in list_Level1"
              :key="item.id"
              :label="item.type_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="type_id"
          style="float: left"
        >
          <el-select
            v-model="articleForm.type_id"
            placeholder="二级分类"
          >
            <el-option
              v-for="item in list_Level2"
              :key="item.id"
              :label="item.type_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item
        label="文章缩略图："
        prop="article_img"
      >
        <crop-upload
          :init-val="articleForm.article_img"
          :always-crop="true"
          :fixedBox="false"
          wrapper-width="200px"
          wrapper-height="150px"
          cropperWidth="600px"
          cropperHeight="450px"
          :autoCropWidth="200"
          :autoCropHeight="150"
          dialogWidth="640px"
          tip="上传图片将进行裁剪，建议图片尺寸200*150px以上。"
          @setVal="(val)=>{articleForm.article_img=val}"
        ></crop-upload>
      </el-form-item>
      <el-form-item
        label="文章摘要："
        prop="abstract"
      >
        <el-input
          style="width:600px"
          type="textarea"
          v-model="articleForm.abstract"
          placeholder="请输入文章摘要"
          maxlength="100"
          show-word-limit
          resize="none"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="文章内容："
        prop="content"
        style="height: 280px"
      >
        <text-editor
          style="width:800px"
          :content="articleForm.content"
          @onEditorChange="onEditorChange"
        ></text-editor>
      </el-form-item>
      <el-form-item
        label="状态："
        prop="status"
      >
        <el-radio-group
          v-model="articleForm.status"
          @change="changeRadio"
        >
          <el-radio
            v-model="articleForm.status"
            :label="1"
          >已发布</el-radio>
          <el-radio
            v-model="articleForm.status"
            :label="2"
          >未发布</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="推荐："
        prop="recommend"
      >
        <el-checkbox-group
          v-model="articleForm.recommend"
          @change="changeCheckBox"
        >
          <el-checkbox label="home">首页推荐</el-checkbox>
          <el-checkbox label="hot">热门资讯</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="展示平台："
        prop="platform"
      >
        <el-checkbox-group v-model="articleForm.platform">
          <el-checkbox label="pc">PC商城</el-checkbox>
          <el-checkbox label="h5">H5商城</el-checkbox>
          <el-checkbox label="xcx">支付宝小程序</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- <el-form-item label="定时发布时间：" prop="publish_time">
      <el-input v-model="articleForm.publish_time"></el-input>
    </el-form-item> -->
      <el-form-item
        label="作者："
        prop="author"
      >
        <el-input
          style="width:300px"
          v-model="articleForm.author"
          maxlength="20"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="page-footer-btns">
      <el-button
        size="small"
        @click="resetForm('articleForm')"
      >重置</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submitForm('articleForm')"
      >发布</el-button>
    </div>
  </div>
</template>

<script>
import { getInfoTypeList } from "@/api/web";
import { addArticle, searchArticle, searchSecondCategory } from "@/api/article";
import textEditor from "@/components/textEditor";
import cropUpload from "@/components/cropUpload";
export default {
  props: ["type", "editId"],
  components: { textEditor, cropUpload },
  data() {
    return {
      list_Level1: [],
      list_Level2: [],
      articleForm: {
        article_title: "",
        keword: "",
        parentid: "",
        type_id: "",
        article_img: "",
        abstract: "",
        status: 1,
        content: "",
        recommend: ["home"],
        home_recommend: "1",
        hot_recommend: "2",
        author: "",
        platform: ["pc", "h5", "xcx"]
      },
      rules: {
        article_title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
        ],
        parentid: [
          { required: true, message: "请选择一级分类", trigger: "change" },
        ],
        type_id: [
          { required: true, message: "请选择二级分类", trigger: "change" },
        ],
        article_img: [
          { required: true, message: "请上传文章缩略图", trigger: "change" },
        ],
        abstract: [
          { required: true, message: "请输入文章摘要", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入文章内容", trigger: "change" },
        ],
        recommend: [
          {
            // type: "array",
            required: true,
            message: "请选择推荐项",
            trigger: "change",
          },
        ],
        status: [
          { required: true, message: "请选择发布状态", trigger: "change" },
        ],
        author: [{ required: true, message: "请输入作者", trigger: "blur" }],
        platform: [
          { required: true, message: "请选择展示平台", trigger: "change" }
        ]
      },
    };
  },
  mounted() {
    if (this.type === "edit") {
      this.$route.meta.title = "平台文章编辑";
      this.getEdit();
    }
    this.queryLevel1();
  },
  methods: {
    queryLevel1() {
      getInfoTypeList().then((res) => {
        this.list_Level1 = res;
      });
    },
    searchSecond(id) {
      searchSecondCategory(id).then((res) => {
        this.list_Level2 = res;
      });
    },
    changeLevel1(val) {
      this.list_Level2 = [];
      this.articleForm.type_id = "";
      this.searchSecond(val);
    },
    getEdit() {
      searchArticle(this.editId).then((res) => {
        if (res) {
          res.recommend = [];
          res.platform = [];
          this.searchSecond(res.parentid);
          this.articleForm = res;
          let temp_recom = "";
          if (res.home_recommend == 1 && res.hot_recommend == 1) {
            temp_recom = ["home", "hot"];
          } else if (res.home_recommend == 1) {
            temp_recom = ["home"];
          } else if (res.hot_recommend == 1) {
            temp_recom = ["hot"];
          } else {
            temp_recom = [];
          }
          this.articleForm.recommend = temp_recom;
          if (res.h5_show == 1) {
            this.articleForm.platform.push('h5');
          }
          if (res.pc_show == 1) {
            this.articleForm.platform.push('pc');
          }
          if (res.xcx_show == 1) {
            this.articleForm.platform.push('xcx');
          }
        }
      });
    },
    changeRadio(val) {
      this.articleForm.status = val;
    },
    changeCheckBox(val) {
      if (val.length == 2) {
        this.articleForm.home_recommend = "1";
        this.articleForm.hot_recommend = "1";
      } else if (val.length == 1) {
        this.articleForm.home_recommend = val[0] == "home" ? "1" : "2";
        this.articleForm.hot_recommend = val[0] == "hot" ? "1" : "2";
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let recommend = this.articleForm;
          if (recommend.length == 2) {
            this.articleForm.home_recommend = "1";
            this.articleForm.hot_recommend = "1";
          } else if (recommend.length == 1) {
            this.articleForm.home_recommend = recommend[0] == "home" ? "1" : "2";
            this.articleForm.hot_recommend = recommend[0] == "hot" ? "1" : "2";
          }
          this.articleForm.h5_show = this.articleForm.platform.indexOf('h5') > -1 ? 1 : 2;
          this.articleForm.pc_show = this.articleForm.platform.indexOf('pc') > -1 ? 1 : 2;
          this.articleForm.xcx_show = this.articleForm.platform.indexOf('xcx') > -1 ? 1 : 2;
          let newForm = { ...this.articleForm };
          // console.log("newForm", newForm);
          delete newForm.platform;
          delete newForm.recommend;
          addArticle(newForm).then((res) => {
            this.$router.push({ name: "articlePlatform" });
          });
        }
      });
    },
    resetForm(formName) {
      if (this.type === "edit") {
        this.$route.meta.title = "平台文章编辑";
        this.getEdit();
      } else {
        this.$refs[formName].resetFields();
        // this.articleForm.content = "";
      }
    },
    onEditorChange(val) {
      this.articleForm.content = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form .el-input {
  width: 100%;
}
.uploadImg {
  width: 100px;
}
</style>